<template>
    <div>
        <div class="nav-top">
            <van-icon name="arrow-left" style="margin-left: 10px;" @click="()=>{this.$router.push('/personal')}"/>
            <h3>修改个人信息</h3>
            <div style="margin-right: 10px;" @click="keep">保存</div>
        </div>
        <div style="margin-top: 10px;">
            <div v-if="type==='1'">
                <van-cell-group>
                    <van-field v-model="value" placeholder="请输入用户名"/>
                </van-cell-group>
            </div>
        </div>
        <div style="margin-top: 10px;">
            <div v-if="type==='2'">
                <van-radio-group v-model="value">
                    <van-cell-group>
                        <van-cell title="男" clickable  @click="value = '0'">
                            <template #right-icon>
                                <svg v-if="value==='0'" t="1598610284658" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314" width="200" height="200"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="2315" fill="#FF7207"></path></svg>
                            </template>
                        </van-cell>
                        <van-cell title="女" clickable  @click="value = '1'">
                            <template #right-icon>
                                <svg v-if="value==='1'" t="1598610284658" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2314" width="200" height="200"><path d="M943.9 228.5c-16.1-17.6-43.5-18.8-61-2.6L383.7 708.3 143.3 442.7c-16-17.7-43.3-19-61-3-17.7 16-19 43.3-3 61L348 797.6c2.1 2.3 4.4 4.3 6.8 6.1 16.3 12.5 39.7 12 55.4-2.4l531.1-511.7c17.6-16.2 18.8-43.5 2.6-61.1z" p-id="2315" fill="#FF7207"></path></svg>
                            </template>
                        </van-cell>
                    </van-cell-group>
                </van-radio-group>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SetInfo",
        components: {},
        data() {
            return {
                type: '',
                value: "",
            }
        },
        mounted() {
            console.log(this.$route.query.name)
            this.type = this.$route.query.type
            this.value = this.$route.query.name
        },
        methods: {
            back() {
                window.history.back()
            },
            keep() {
                console.log('a',this.type)
                if (this.type === '1') {
                    this.$store.dispatch('SETINFO', {
                        nickname: this.value
                    }).then(res => {
                        if(res){
                            this.$router.push('/personal')
                        }
                    })

                } else if (this.type === '2') {
                    this.$store.dispatch('SETINFO', {
                        sex: this.value
                    }).then(res => {
                        if(res){
                            this.$router.push('/personal')
                        }
                    })
                }
            }
        },
        filters: {},
        watch: {}
    }
</script>

<style scoped lang="scss">


    .van-cell-group .van-cell {
        line-height: 80px;
        font-size: 28px;
        display: flex;
        align-items: center;

        /deep/svg{
            width: 35px;
            height: 35px;
        }
    }

    .nav-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        font-size: 30px;
        height: 87px;
        background: #fff;
        align-items: center;

        h3 {
            font-weight: 300;
        }

        .van-icon {
            font-size: 45px;
        }
    }
</style>